<script setup lang="ts">
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import { virtually } from '@/apis/vehicles';

const route = useRoute();

interface FormState {
    carCode: string;
    carName: string;
    remark: string;
}
// const storedUserData = localStorage.getItem('userData');
// let userPhone = '';

// if (storedUserData) {
//     const loginData = JSON.parse(storedUserData);
//     if (loginData && loginData.userPhone) {
//         userPhone = loginData.userPhone;
//         console.log('手机号:', userPhone);
//     }
// } else {
// }
    
const formState = reactive<FormState>({
    carCode: '',
    carName: '',
    remark: '',
});

async function handleSubmit() {
    try {
        const { carId, productId } = route.params;

        const res = await virtually({
            data: {
                carId: Number(carId),
                productId: Number(productId),
                ...formState,
                // phoneNumber: userPhone,
            },
        });

        if (res.status === 100) {
            // 上传成功，显示提示信息
            console.log('上传成功');
          
        } else {
            console.log('上传失败');
          
        }
    } catch (error) {
        console.log(error);
       
    }
}
</script>

<template>
    <div>
        <!-- 车型名称 -->
        <div class="name">
            <text class="UnifiedName">车型编号</text>
            <div class="UnifiedBoxs">
                <input
                    type="text"
                    v-model="formState.carCode"
                    placeholder="请输入编号"
                    class="inputField"
                />
            </div>
        </div>
        <div class="name">
            <text class="UnifiedName">车型名称</text>
            <div class="UnifiedBoxs">
                <input
                    type="text"
                    v-model="formState.carName"
                    placeholder="请输入车型"
                    class="inputField"
                />
            </div>
        </div>
        <div class="name">
            <text class="UnifiedName">车型备注</text>
            <div class="UnifiedBoxs">
                <textarea
                    v-model="formState.remark"
                    placeholder="请输入备注内容"
                ></textarea>
            </div>
        </div>
        <div class="button">
            <button class="submit" @click="handleSubmit">上传</button>
        </div>
    </div>
</template>
<!-- <script>
import { submits } from '@/apis/upimg';
export default {
  data() {
    return {
      userPhone:0,
      carId: 0,
      productId: 0,
      carName: '',
      remark: '',
      carCode: '',
    };
  },
  created() {
        const productId = this.$route.params.productId;
        const carId = this.$route.params.carId;
        console.log('productId:',this.$route.params);
        console.log('carId:', carId);
        this.productId = productId; 
        this.carId = carId; 
    // 获取存储在localStorage中的userData数据
    const storedUserData = localStorage.getItem('userData');
    if (storedUserData) {
      this.loginData = JSON.parse(storedUserData);
      console.log('从localStorage中获取的userData信息:', this.loginData);
      if (this.loginData && this.loginData.userPhone) {
        this.userPhone = this.loginData.userPhone;
        console.log('手机号:', this.userPhone);
      }
    } else {
      console.log('未找到存储的userData信息');
    }
        
  },
  methods: {
      //上传
       async UploadFun() {
           const datae ={
            // userPhone: this.userPhone,
            carId: parseInt(this.carId),
            productId: parseInt(this.productId),
            carName: this.carName,
            remark: this.remark,
            carCode: this.carCode
           }
                 console.log('上传虚拟数据传参',datae)
      try {
        const response = await submits({
          data: datae
        });

        // 处理上传成功后的逻辑
        console.log('上传成功', response);
      } catch (error) {
        // 处理上传失败的逻辑
        console.error('上传失败', error);
      }
    },
    handleInput(e) {
      const value = e.target.value;
      this.remark = value;
      console.log('备注', this.remark);
    },
    Input(e) {
      const value = e.target.value;
      this.carCode = value;
      console.log('编号', this.carCode);
    },
    Inputs(e) {
      const value = e.target.value;
      this.carName = value;
      console.log('车型', this.carName);
    },

  },
  mounted() {

  },
};
</script> -->

<style>
.outer {
    margin-top: 50px;
}

.name {
    display: flex;
    align-items: center;
    flex: 1;
    margin-top: 40px;
    margin-left: 40px;
}

.UnifiedName {
    width: 20%;
    font-size: 28px;
    font-family: 'PingFang SC';
}
.inputField {
    width: 100%;
    height: 50px;
    border: none;
    font-size: 20px;
}

.UnifiedBoxs {
    position: relative;
    width: 60%;
    height: auto;
    border: 4px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin-left: 10px;
    font-size: 32px;
    font-family: 'PingFang SC';
    color: rgb(120, 121, 121);
    display: flex;
    justify-content: center;
}

.UnifiedBoxs textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
    font-size: 20px;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12vh;
}

.submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blue;
    color: white;
    width: 280px;
    margin-top: 50px;
    height: 80px;
    border-radius: 10px;
}
</style>
